<template>
<!--  <div>
    <div :id="chartId" :style="{height: height}"></div>
  </div>-->
  <div style="height: 100%;display: flex;justify-content: center;align-items: center;">
    <div :id="chartId" :style="{height: height, width: '99%', display: 'flex', justifyContent: 'center', alignItems: 'center'}"></div>
  </div>
</template>

<script>

const uuid = require('node-uuid');

export default {
  //柱形图
  name: "BarChart",
  props: {
    title: {
      type: String,
      default: function () {
        return "";
      }
    },
    height: {
      type: String,
      default: function () {
        return "300px";
      }
    },
    dataList: {
      type: Array,
      default: function () {
        //[{name:"",values:["",""]}],[{name:"",values:["",""]}]
        return [];
      }
    },
    option: {
      type: Object,
      default: function () {
        return {showLegend: true, tags: [], yInterval: 0};
      }
    }
  },
  data() {
    return {
      chartId: "my-bar-chart",
      chartDom: null,
      chart: null,
      fontSize: {
        title: null,
        tooltip: null,
        legend: null,
        dataLabel: null
      }
    };
  },
  created() {
    this.chartId = uuid.v4();
    this.setFontSize();
  },
  mounted() {
    this.chartDom = document.getElementById(this.chartId);
    this.chart = this.echarts.init(this.chartDom);
    this.initOption();
  },
  methods: {
    getChatType() {
      return "bar_chart"
    },
    getChartData(dataList) {
      let xAxisData = [];
      let seriesData = [];
      let that = this;
      dataList.forEach(function (item) {
        xAxisData.push(item.name);
        if (item.values && item.values.length > 0) {
          for (let i = 0; i < item.values.length; i++) {
            //判断是否存在
            let have = false
            seriesData.forEach(function (si) {
              if (si.name == item.values[i].label) {
                have = true;
                si.data.push(item.values[i].value);
              }
            });
            if (!have) {
              let sd = {
                type: "bar",
                barMaxWidth: '50%',
                name: item.values[i].label,
                data: [item.values[i].value],
                label: {
                  show: true,
                  formatter: '{c}',
                  color: "#FFF",
                  fontSize: that.fontSize.dataLabel,
                }
              };
              if (item.values[i].color) {
                sd.itemStyle = {color: item.values[i].color};
              }
              seriesData.push(sd)
            }
          }
        }
      });
      return {
        xAxisData: xAxisData,
        seriesData: seriesData
      }
    },
    initOption() {
      let chartData = this.getChartData(this.dataList);
      let xAxisData = chartData.xAxisData;
      let seriesData = chartData.seriesData;
      let option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: "#000000c9",
          appendToBody: true,
          textStyle: {
            color: '#fff',
            fontSize: this.fontSize.tooltip,
          },
        },
        title: {
          text: this.title,
          left: '10px',
          top: 'center',
          textStyle: {
            color: "#fff",
            fontSize: this.fontSize.title
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '0%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#fff' // 设置轴线颜色为白色
            }
          },
          axisLabel:{
            interval:0,//横轴信息全部显示
            textStyle: {
              color:'#fff',
              fontSize: this.fontSize.dataLabel
            },
            formatter: function(value, index) {
              return value.substring(value.lastIndexOf("-") + 1);
            }
          },
          data: xAxisData
        },
        textStyle:{
          color:'#fff',
          fontSize: this.fontSize.dataLabel
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: seriesData
      };
      if (this.option.yInterval) {
        option.yAxis['interval'] = 1;
      }
      if (this.option && this.option.showLegend) {
        option.legend = {
          type: 'scroll',
          orient: 'horizontal',
          right: 0,
          top: 0,
          textStyle: { color: '#fff',fontSize: this.fontSize.legend }
        };
      }
      if (this.chart) {
        this.chart.setOption(option);
      }
    },
    setData(dataList) {
      let chartData = this.getChartData(dataList);
      let xAxisData = chartData.xAxisData;
      let seriesData = chartData.seriesData;
      if (this.chart) {
        let option = this.chart.getOption();
        option.xAxis[0].data = xAxisData;
        option.series = seriesData;
        this.chart.setOption(option, true);
      }
    },
    setChatFontSize() {
      if (this.chart) {
        let newOption = {
          title: {
            textStyle: {
              fontSize: this.fontSize.title
            }
          },
          tooltip: {
            textStyle: {
              fontSize: this.fontSize.tooltip
            }
          },
          legend: {
            textStyle: {
              fontSize: this.fontSize.legend
            }
          },
          xAxis: {
            axisLabel: {
              textStyle: {
                fontSize: this.fontSize.dataLabel
              }
            }
          }
        };
        this.chart.setOption(newOption, false);
      }
    },
    setFontSize() {
      this.fontSize.title = this.translateFont(18);
      this.fontSize.tooltip = this.translateFont(16);
      this.fontSize.legend = this.translateFont(16);
      this.fontSize.dataLabel = this.translateFont(16);
    },
    translateFont(size) {
      let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      if(!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return size * fontSize;
    },
    changeWidth() {
      if (this.chart) {
        this.setFontSize();
        this.chart.resize();
        this.setChatFontSize();
      }
    }
  }
};
</script>

<style>

</style>
